<!DOCTYPE html>
<html lang=en>
<head>
    <!-- so meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="一直对Js的作用域有点迷糊，今天偶然读到Javascript权威指南，立马被吸引住了，写的真不错。我看的是第六版本，相当的厚，大概1000多页，Js博大精深，要熟悉精通需要大毅力大功夫。 一：函数作用域    先看一小段代码：  [javascript]  view plain copy  var scope&#x3D;”global”;   function t(){   console.log(scop">
<meta property="og:type" content="article">
<meta property="og:title" content="JS块级作用域">
<meta property="og:url" content="http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/index.html">
<meta property="og:site_name" content="TmoonSite">
<meta property="og:description" content="一直对Js的作用域有点迷糊，今天偶然读到Javascript权威指南，立马被吸引住了，写的真不错。我看的是第六版本，相当的厚，大概1000多页，Js博大精深，要熟悉精通需要大毅力大功夫。 一：函数作用域    先看一小段代码：  [javascript]  view plain copy  var scope&#x3D;”global”;   function t(){   console.log(scop">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2018-04-21T19:02:40.000Z">
<meta property="article:modified_time" content="2020-01-07T10:48:14.801Z">
<meta property="article:author" content="Tmoonlight">
<meta name="twitter:card" content="summary">
    
    
        
          
              <link rel="shortcut icon" href="/images/favicon.ico">
          
        
        
          
            <link rel="icon" type="image/png" href="/images/logo2.gif" sizes="192x192">
          
        
        
          
            <link rel="apple-touch-icon" sizes="180x180" href="/images/logo2.gif">
          
        
    
    <!-- title -->
    <title>JS块级作用域</title>
    <!-- styles -->
    
<link rel="stylesheet" href="/css/style.css">

    <!-- persian styles -->
    
      
<link rel="stylesheet" href="/css/rtl.css">

    
    <!-- rss -->
    
    
<meta name="generator" content="Hexo 4.2.0"></head>

<body class="max-width mx-auto px3 ltr">
    
      <div id="header-post">
  <a id="menu-icon" href="#"><i class="fas fa-bars fa-lg"></i></a>
  <a id="menu-icon-tablet" href="#"><i class="fas fa-bars fa-lg"></i></a>
  <a id="top-icon-tablet" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" style="display:none;"><i class="fas fa-chevron-up fa-lg"></i></a>
  <span id="menu">
    <span id="nav">
      <ul>
         
          <li><a href="/">Home</a></li>
         
          <li><a href="/about/">About</a></li>
         
          <li><a href="/archives/">Writing</a></li>
         
          <li><a href="/projects_url">Projects</a></li>
        
      </ul>
    </span>
    <br/>
    <span id="actions">
      <ul>
        
        <li><a class="icon" href="/2018/05/21/Exceptionless%E6%9C%AC%E5%9C%B0%E9%83%A8%E7%BD%B2/"><i class="fas fa-chevron-left" aria-hidden="true" onmouseover="$('#i-prev').toggle();" onmouseout="$('#i-prev').toggle();"></i></a></li>
        
        
        <li><a class="icon" href="/2018/04/10/NG%E7%AC%94%E8%AE%B0/"><i class="fas fa-chevron-right" aria-hidden="true" onmouseover="$('#i-next').toggle();" onmouseout="$('#i-next').toggle();"></i></a></li>
        
        <li><a class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up" aria-hidden="true" onmouseover="$('#i-top').toggle();" onmouseout="$('#i-top').toggle();"></i></a></li>
        <li><a class="icon" href="#"><i class="fas fa-share-alt" aria-hidden="true" onmouseover="$('#i-share').toggle();" onmouseout="$('#i-share').toggle();" onclick="$('#share').toggle();return false;"></i></a></li>
      </ul>
      <span id="i-prev" class="info" style="display:none;">Previous post</span>
      <span id="i-next" class="info" style="display:none;">Next post</span>
      <span id="i-top" class="info" style="display:none;">Back to top</span>
      <span id="i-share" class="info" style="display:none;">Share post</span>
    </span>
    <br/>
    <div id="share" style="display: none">
      <ul>
  <li><a class="icon" href="http://www.facebook.com/sharer.php?u=http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/" target="_blank" rel="noopener"><i class="fab fa-facebook " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://twitter.com/share?url=http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/&text=JS块级作用域" target="_blank" rel="noopener"><i class="fab fa-twitter " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.linkedin.com/shareArticle?url=http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/&title=JS块级作用域" target="_blank" rel="noopener"><i class="fab fa-linkedin " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url=http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/&is_video=false&description=JS块级作用域" target="_blank" rel="noopener"><i class="fab fa-pinterest " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=JS块级作用域&body=Check out this article: http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/"><i class="fas fa-envelope " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://getpocket.com/save?url=http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/&title=JS块级作用域" target="_blank" rel="noopener"><i class="fab fa-get-pocket " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://reddit.com/submit?url=http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/&title=JS块级作用域" target="_blank" rel="noopener"><i class="fab fa-reddit " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.stumbleupon.com/submit?url=http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/&title=JS块级作用域" target="_blank" rel="noopener"><i class="fab fa-stumbleupon " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://digg.com/submit?url=http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/&title=JS块级作用域" target="_blank" rel="noopener"><i class="fab fa-digg " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.tumblr.com/share/link?url=http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/&name=JS块级作用域&description=" target="_blank" rel="noopener"><i class="fab fa-tumblr " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://news.ycombinator.com/submitlink?u=http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/&t=JS块级作用域" target="_blank" rel="noopener"><i class="fab fa-hacker-news " aria-hidden="true"></i></a></li>
</ul>

    </div>
    <div id="toc">
      
    </div>
  </span>
</div>

    
    <div class="content index py4">
        
        <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    
    <h1 class="posttitle" itemprop="name headline">
        JS块级作用域
    </h1>



    <div class="meta">
      <span class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">TmoonSite</span>
      </span>
      
    <div class="postdate">
      
        <time datetime="2018-04-21T19:02:40.000Z" itemprop="datePublished">2018-04-22</time>
        
      
    </div>


      

      

    </div>
  </header>
  

  <div class="content" itemprop="articleBody">
    <p>一直对Js的作用域有点迷糊，今天偶然读到Javascript权威指南，立马被吸引住了，写的真不错。我看的是第六版本，相当的厚，大概1000多页，Js博大精深，要熟悉精通需要大毅力大功夫。</p>
<p>一：函数作用域</p>
<p>   先看一小段代码：</p>
<p> <strong>[javascript]</strong>  <a href="https://blog.csdn.net/yueguanghaidao/article/details/9568071#" target="_blank" rel="noopener" title="view plain">view plain</a> <a href="https://blog.csdn.net/yueguanghaidao/article/details/9568071#" target="_blank" rel="noopener" title="copy">copy</a></p>
<ol>
<li>var scope=”global”;  </li>
<li>function t(){  </li>
<li>console.log(scope);  </li>
<li>var scope=”local”  </li>
<li>console.log(scope);  </li>
<li>}  </li>
<li>t();  </li>
</ol>
<p>(PS: console.log()是firebug提供的调试工具，很好用，有兴趣的童鞋可以用下，比浏览器+alert好用多了）</p>
<p>第一句输出的是： “undefined”，而不是 “global”</p>
<p>第二讲输出的是：”local”</p>
<p>  你可能会认为第一句会输出：”global”,因为代码还没执行var scope=”local”,所以肯定会输出“global”。</p>
<p>  我说这想法完全没错，只不过用错了对象。我们首先要区分Javascript的函数作用域与我们熟知的C/C++等的块级作用域。</p>
<p>  在C/C++中，花括号内中的每一段代码都具有各自的作用域，而且变量在声明它们的代码段之外是不可见的。而Javascript压根没有块级作用域，而是函数作用域.</p>
<p>所谓函数作用域就是说：-》变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。</p>
<p>所以根据函数作用域的意思，可以将上述代码重写如下：</p>
<p> <strong>[javascript]</strong>  <a href="https://blog.csdn.net/yueguanghaidao/article/details/9568071#" target="_blank" rel="noopener" title="view plain">view plain</a> <a href="https://blog.csdn.net/yueguanghaidao/article/details/9568071#" target="_blank" rel="noopener" title="copy">copy</a></p>
<ol>
<li>var scope=”global”;  </li>
<li>function t(){  </li>
<li>var scope;  </li>
<li>console.log(scope);  </li>
<li>scope=”local”  </li>
<li>console.log(scope);  </li>
<li>}  </li>
<li>t();  </li>
</ol>
<pre><code>我们可以看到，由于函数作用域的特性，局部变量在整个函数体始终是由定义的，我们可以将变量声明”提前“到函数体顶部，同时变量初始化还在原来位置。</code></pre><p>为什么说Js没有块级作用域呢，有以下代码为证：</p>
<p> <strong>[javascript]</strong>  <a href="https://blog.csdn.net/yueguanghaidao/article/details/9568071#" target="_blank" rel="noopener" title="view plain">view plain</a> <a href="https://blog.csdn.net/yueguanghaidao/article/details/9568071#" target="_blank" rel="noopener" title="copy">copy</a></p>
<ol>
<li>var name=”global”;  </li>
<li>if(true){  </li>
<li>var name=”local”;  </li>
<li>console.log(name)  </li>
<li>}  </li>
<li>console.log(name);  </li>
</ol>
<p>都输出是“local”,如果有块级作用域，明显if语句将创建局部变量name,并不会修改全局name,可是没有这样，所以Js没有块级作用域。</p>
<p>现在很好理解为什么会得出那样的结果了。scope声明覆盖了全局的scope,但是还没有赋值，所以输出：”undefined“。</p>
<p>所以下面的代码也就很好理解了。</p>
<p> <strong>[javascript]</strong>  <a href="https://blog.csdn.net/yueguanghaidao/article/details/9568071#" target="_blank" rel="noopener" title="view plain">view plain</a> <a href="https://blog.csdn.net/yueguanghaidao/article/details/9568071#" target="_blank" rel="noopener" title="copy">copy</a></p>
<ol>
<li>function t(flag){  </li>
<li>if(flag){  </li>
<li>var s=”ifscope”;  </li>
<li>for(var i=0;i&lt;2;i++)   </li>
<li>;  </li>
<li>}  </li>
<li>console.log(i);  </li>
<li>console.log(s);  </li>
<li>}  </li>
<li>t(true);  </li>
</ol>
<p>输出：2  ”ifscope”  </p>
<p>二：变量作用域</p>
<p>还是首先看一段代码：</p>
<p> <strong>[javascript]</strong>  <a href="https://blog.csdn.net/yueguanghaidao/article/details/9568071#" target="_blank" rel="noopener" title="view plain">view plain</a> <a href="https://blog.csdn.net/yueguanghaidao/article/details/9568071#" target="_blank" rel="noopener" title="copy">copy</a></p>
<ol>
<li>function t(flag){  </li>
<li>if(flag){  </li>
<li>s=”ifscope”;  </li>
<li>for(var i=0;i&lt;2;i++)   </li>
<li>;  </li>
<li>}  </li>
<li>console.log(i);  </li>
<li>}  </li>
<li>t(true);  </li>
<li>console.log(s);  </li>
</ol>
<p>就是上面的翻版，知识将声明s中的var去掉。</p>
<p>程序会报错还是输出“ifscope”呢？</p>
<p>让我揭开谜底吧，会输出：”ifscope”</p>
<p>这主要是Js中没有用var声明的变量都是全局变量，而且是顶层对象的属性。</p>
<p>所以你用console.log(window.s)也是会输出“ifconfig”</p>
<p>当使用var声明一个变量时，创建的这个属性是不可配置的，也就是说无法通过delete运算符删除</p>
<p>var name=1    -&gt;不可删除</p>
<p>sex=”girl“         -&gt;可删除</p>
<p>this.age=22    -&gt;可删除</p>
<p>三：作用域链</p>
<p>先来看一段代码：</p>
<p> <strong>[javascript]</strong>  <a href="https://blog.csdn.net/yueguanghaidao/article/details/9568071#" target="_blank" rel="noopener" title="view plain">view plain</a> <a href="https://blog.csdn.net/yueguanghaidao/article/details/9568071#" target="_blank" rel="noopener" title="copy">copy</a></p>
<ol>
<li>name=”lwy”;  </li>
<li>function t(){  </li>
<li>var name=”tlwy”;  </li>
<li>function s(){  </li>
<li>var name=”slwy”;  </li>
<li>console.log(name);  </li>
<li>}  </li>
<li>function ss(){  </li>
<li>console.log(name);  </li>
<li>}  </li>
<li>s();  </li>
<li>ss();  </li>
<li>}  </li>
<li>t();  </li>
</ol>
<p>当执行s时，将创建函数s的执行环境(调用对象),并将该对象置于链表开头，然后将函数t的调用对象链接在之后，最后是全局对象。然后从链表开头寻找变量name,很明显</p>
<p>name是”slwy”。</p>
<p>但执行ss()时，作用域链是： ss()-&gt;t()-&gt;window,所以name是”tlwy”</p>
<p>下面看一个很容易犯错的例子：</p>
<p> <strong>[html]</strong>  <a href="https://blog.csdn.net/yueguanghaidao/article/details/9568071#" target="_blank" rel="noopener" title="view plain">view plain</a> <a href="https://blog.csdn.net/yueguanghaidao/article/details/9568071#" target="_blank" rel="noopener" title="copy">copy</a></p>
<ol>
<li><html>  </li>
<li><head>  </li>
<li><script type="text/javascript">  </li>
<li>function buttonInit(){  </li>
<li>for(var i=1;i&lt;4;i++){  </li>
<li>var b=document.getElementById(“button”+i);  </li>
<li>b.addEventListener(“click”,function(){ alert(“Button”+i);},false);  </li>
<li>}  </li>
<li>}  </li>
<li>window.onload=buttonInit;  </li>
<li></script>  </li>
<li><meta name="generator" content="Hexo 4.2.0"></head>  </li>
<li><body>  </li>
<li><button id="button1">Button1</button>  </li>
<li><button id="button2">Button2</button>  </li>
<li><button id="button3">Button3</button>  </li>
<li></body>  </li>
<li></html>  



</li>
</ol>
<p>当文档加载完毕，给几个按钮注册点击事件，当我们点击按钮时，会弹出什么提示框呢？</p>
<p>很容易犯错，对是的，三个按钮都是弹出：”Button4”,你答对了吗？</p>
<p>当注册事件结束后，i的值为4，当点击按钮时，事件函数即function(){ alert(“Button”+i);}这个匿名函数中没有i,根据作用域链，所以到buttonInit函数中找，此时i的值为4，</p>
<p>所以弹出”button4“。  </p>
<p>四：with语句</p>
<p>说到作用域链，不得不说with语句。with语句主要用来临时扩展作用域链，将语句中的对象添加到作用域的头部。</p>
<p>看下面代码  </p>
<p> <strong>[javascript]</strong>  <a href="https://blog.csdn.net/yueguanghaidao/article/details/9568071#" target="_blank" rel="noopener" title="view plain">view plain</a> <a href="https://blog.csdn.net/yueguanghaidao/article/details/9568071#" target="_blank" rel="noopener" title="copy">copy</a></p>
<ol>
<li>person={name:”yhb”,age:22,height:175,wife:{name:”lwy”,age:21}};  </li>
<li>with(person.wife){  </li>
<li>console.log(name);  </li>
<li>}  </li>
</ol>
<p>with语句将person.wife添加到当前作用域链的头部，所以输出的就是：“lwy”.</p>
<p>with语句结束后，作用域链恢复正常。</p>

  </div>
</article>



        
          <div id="footer-post-container">
  <div id="footer-post">

    <div id="nav-footer" style="display: none">
      <ul>
         
          <li><a href="/">Home</a></li>
         
          <li><a href="/about/">About</a></li>
         
          <li><a href="/archives/">Writing</a></li>
         
          <li><a href="/projects_url">Projects</a></li>
        
      </ul>
    </div>

    <div id="toc-footer" style="display: none">
      
    </div>

    <div id="share-footer" style="display: none">
      <ul>
  <li><a class="icon" href="http://www.facebook.com/sharer.php?u=http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/" target="_blank" rel="noopener"><i class="fab fa-facebook fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://twitter.com/share?url=http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/&text=JS块级作用域" target="_blank" rel="noopener"><i class="fab fa-twitter fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.linkedin.com/shareArticle?url=http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/&title=JS块级作用域" target="_blank" rel="noopener"><i class="fab fa-linkedin fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url=http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/&is_video=false&description=JS块级作用域" target="_blank" rel="noopener"><i class="fab fa-pinterest fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=JS块级作用域&body=Check out this article: http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/"><i class="fas fa-envelope fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://getpocket.com/save?url=http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/&title=JS块级作用域" target="_blank" rel="noopener"><i class="fab fa-get-pocket fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://reddit.com/submit?url=http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/&title=JS块级作用域" target="_blank" rel="noopener"><i class="fab fa-reddit fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.stumbleupon.com/submit?url=http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/&title=JS块级作用域" target="_blank" rel="noopener"><i class="fab fa-stumbleupon fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://digg.com/submit?url=http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/&title=JS块级作用域" target="_blank" rel="noopener"><i class="fab fa-digg fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.tumblr.com/share/link?url=http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/&name=JS块级作用域&description=" target="_blank" rel="noopener"><i class="fab fa-tumblr fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://news.ycombinator.com/submitlink?u=http://yoursite.com/2018/04/22/JS%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F/&t=JS块级作用域" target="_blank" rel="noopener"><i class="fab fa-hacker-news fa-lg" aria-hidden="true"></i></a></li>
</ul>

    </div>

    <div id="actions-footer">
        <a id="menu" class="icon" href="#" onclick="$('#nav-footer').toggle();return false;"><i class="fas fa-bars fa-lg" aria-hidden="true"></i> Menu</a>
        <a id="toc" class="icon" href="#" onclick="$('#toc-footer').toggle();return false;"><i class="fas fa-list fa-lg" aria-hidden="true"></i> TOC</a>
        <a id="share" class="icon" href="#" onclick="$('#share-footer').toggle();return false;"><i class="fas fa-share-alt fa-lg" aria-hidden="true"></i> Share</a>
        <a id="top" style="display:none" class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up fa-lg" aria-hidden="true"></i> Top</a>
    </div>

  </div>
</div>

        
        <footer id="footer">
  <div class="footer-left">
    Copyright &copy; 2020 Tmoonlight
  </div>
  <div class="footer-right">
    <nav>
      <ul>
         
          <li><a href="/">Home</a></li>
         
          <li><a href="/about/">About</a></li>
         
          <li><a href="/archives/">Writing</a></li>
         
          <li><a href="/projects_url">Projects</a></li>
        
      </ul>
    </nav>
  </div>
</footer>

    </div>
    <!-- styles -->

<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">


<link rel="stylesheet" href="/lib/justified-gallery/css/justifiedGallery.min.css">


    <!-- jquery -->

<script src="/lib/jquery/jquery.min.js"></script>


<script src="/lib/justified-gallery/js/jquery.justifiedGallery.min.js"></script>

<!-- clipboard -->

  
<script src="/lib/clipboard/clipboard.min.js"></script>

  <script type="text/javascript">
  $(function() {
    // copy-btn HTML
    var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"Copy to clipboard!\">";
    btn += '<i class="far fa-clone"></i>';
    btn += '</span>'; 
    // mount it!
    $(".highlight table").before(btn);
    var clip = new ClipboardJS('.btn-copy', {
      text: function(trigger) {
        return Array.from(trigger.nextElementSibling.querySelectorAll('.code')).reduce((str,it)=>str+it.innerText+'\n','')
      }
    });
    clip.on('success', function(e) {
      e.trigger.setAttribute('aria-label', "Copied!");
      e.clearSelection();
    })
  })
  </script>


<script src="/js/main.js"></script>

<!-- search -->

<!-- Google Analytics -->

<!-- Baidu Analytics -->

<!-- Disqus Comments -->


</body>
</html>
